<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}


<!-- 写入 base.html 中定义的 title -->
{% block title %}老鑫头の个人博客{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

    <!-- 定义放置文章标题的div容器 -->
    <div class="container">

        <div class="row">
            <div class="col-12" style="display: contents">
                <!-- 文章列表 -->
                <div class="col-9" style="background-color: white">
                    <br>
                    <!-- 搜索提示语 -->
                    {% if search %}
                        {% if articles %}
                            <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下：</h4>
                        {% else %}
                            <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
                        {% endif %}
                        <h4>
                            点击<a href="{% url 'index' %}">这里</a>返回首页
                        </h4>
                        <hr>
                    {% endif %}

                    <!-- 列表循环 -->
                    <div class="row mt-2">
                        {% for article in articles %}
                            <!-- 标题图 -->

                            <div class="col-6" style="margin: auto 0">
                                {% if article.avatar %}
                                    <img src="{{ article.avatar.url }}"
                                         alt="avatar"
                                         style="width:100%; border-radius: 20px">
                                {% else %}
                                    <!-- 文本居中显示 -->
                                    <div style="width: 100%; height: 140px;
                               color: #6c757d;
                               background-color: gainsboro;
                               border-radius: 20px;
                               display: flex;
                               align-items: center;
                               justify-content: center"
                                    >标题图
                                    </div>
                                {% endif %}
                            </div>

                            <!-- 文章内容 -->
                            <div class="col-6">

                                <h4>
                                    <b>

                                        <!-- 标题 -->
                                        <a href="{% url 'article:article_detail' article.id %}"
                                           style="color: black; font-size: 40px; font-family: 微软雅黑">
                                            {{ article.title }}
                                        </a>

                                    </b>

                                </h4>
                                <b>
                                    <!-- 栏目 -->
                                    {% if article.column %}
                                        <button type="button"
                                                class="btn btn-sm mb-2
                        {% if article.column.title == '学习' %}
                            btn-success
                        {% elif article.column.title == '日记' %}
                            btn-danger
                        {% elif article.column.title == '随笔' %}
                            btn-warning
                        {% endif %}">
                                            {{ article.column }}
                                        </button>
                                    {% endif %}
                                </b>


                                <!-- 标签 -->
                                <span>
                        {% for tag in article.tags.all %}
                            <a href="{% url 'index' %}?tag={{ tag }}"
                               class="badge badge-secondary">
                                {{ tag }}
                            </a>
                        {% endfor %}
                    </span>


                                <!-- 注脚 -->
                                <p>
                                    <!-- 附加信息 增加图标-->
                                    <span>
                            <i class="fas fa-eye" style="color: lightskyblue;"></i>
                            {{ article.total_views }}&nbsp;&nbsp;&nbsp;
                        </span>
                                    <span>
                            <i class="fas fa-heart" style="color: red"></i>
                            {{ article.likes }}&nbsp;&nbsp;&nbsp;
                        </span>
                                    <span>
                            <i class="fas fa-comments" style="color: yellowgreen;"></i>
                                        <!-- 评论的计数 -->
                            {{ article.comments.count }}&nbsp;&nbsp;&nbsp;
                        </span>
                                    <span>
                            <i class="fas fa-clock" style="color: pink;"></i>
                            {{ article.created|date:'Y-m-d f' }}
                        </span>
                                </p>
                                <hr>
                                <p>{{ article.abstract|safe }}</p>
                                <a class="btn" href="{% url 'article:article_detail' article.id %}"
                                        style="color: black; background-color: darkseagreen"><b>阅读全文...</b></a>

                            </div>
                            <hr style="width: 100%;"/>
                        {% endfor %}
                    </div>

                    <!-- 页码导航 -->
                    <br>
                    <div class="pagination row">
                        <div class="m-auto">
                            <span class="step-links">
                                <!-- 如果不是第一页，则显示上翻按钮 -->
                                {% if articles.has_previous %}
                                    <a href="?page=1&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                                       class="btn btn-success">
                                        &laquo; 1
                                    </a>
                                    <span>...</span>
                                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                                       class="btn btn-secondary">
                                        {{ articles.previous_page_number }}
                                    </a>
                                {% endif %}

                                <!-- 当前页面 -->
                                <span class="current btn btn-danger btn-lg">
                                    {{ articles.number }}
                                </span>

                                <!-- 如果不是最末页，则显示下翻按钮 -->
                                {% if articles.has_next %}
                                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                                       class="btn btn-secondary">{{ articles.next_page_number }}
                                    </a>
                                    <span>...</span>
                                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                                       class="btn btn-success">
                                        {{ articles.paginator.num_pages }} &raquo;
                                    </a>
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    <br>
                </div>

                <!-- 侧边栏 -->
                {% load blog_tags %}
                <div class="col-3">
                    <br>
                    <!-- 搜索栏 -->
                    <div align="center" class="row">
                        <div class="col-auto mr-auto">
                            <form class="form-inline" style="text-align: center">
                                <label class="sr-only">内容</label>
                                <input type="text"
                                       class="form-control mb-2 mr-sm-2"
                                       name="search"
                                       placeholder="搜索文章..."
                                       required
                                       style="text-align: center; border-radius: 20px"
                                >
                                <button type="submit" style="border: none; background-color: #ffffff">
                                    <span style="color: #6c757d" class="fas fa-search"></span>
                                </button>
                            </form>
                        </div>
                    </div>
                    <br>
                    <!--最新-->
                    <a style="font-family: 微软雅黑; font-size: 25px; display: block; text-align: center">
                        最新博客
                    </a>
                    <div style="border:2px solid ;float:left;width:100%;background-color: white; color: white"></div>
                    <br>
                    <div>
                        {% get_recent_articles as recent_article_list %}
                        {% for article in recent_article_list %}
                            <h5>
                                <b>
                                    <a href="{% url 'article:article_detail' article.id %}"
                                       style="display: block; text-align: center">
                                        {{ article.title }}
                                    </a>
                                </b>
                            </h5>
                            {{ article.author }}发表于：{{ article.created|date:"Y年m月d日" }}
                        {% endfor %}
                        <h5>
                            <b>
                                <a href="{% url 'index' %}"
                                   style="display: block; text-align: center">更多...</a>
                            </b>
                        </h5>
                    </div>

                    <br>
                    <!--推荐-->
                    <a style="font-family: 微软雅黑; font-size: 25px; display: block; text-align: center">
                        推荐博客
                    </a>
                    <div style="border:2px solid ;float:left;width:100%;background-color: white; color: white"></div>
                    <br>
                    <div>
                        {% get_popular_articles as popular_article_list %}
                        {% for article in popular_article_list %}
                            <h5>
                                <b>
                                    <a href="{% url 'article:article_detail' article.id %}"
                                       style="display: block; text-align: center">
                                        {{ article.title }}
                                        <span>
                                            <i class="fas fa-eye" style="color: blue; font-size: 15px">
                                                {{ article.total_views }}&nbsp;&nbsp;&nbsp;
                                            </i>
                                        </span>
                                    </a>
                                </b>
                            </h5>
                        {% endfor %}
                        <h5>
                            <b>
                                <a href="{% url 'index' %}?order=total_views"
                                   style="display: block; text-align: center">更多...</a>
                            </b>
                        </h5>
                    </div>


                    <!--关于-->
                    <br>
                    <a style="font-size: 25px; display: block; text-align: center">关于博主</a>
                    <div style="border:2px solid ;float:left;width:100%;background-color: white; color: white"></div>
                    <br>
                    <div style="text-indent: 2em">
                        <h5>
                            老鑫头，一个90后新时代青年。
                        </h5>
                        <hr>
                        <b>Q Q：</b><a>1821708742</a>
                        <br>
                        <b>邮箱：</b><a>15927571250@163.com</a>
                        <br>
                        <b>码云：</b><a href="https://gitee.com/laoxintou">https://gitee.com/laoxintou</a>
                    </div>
                </div>
            </div>
        </div>


    </div>
{% endblock content %}
